<script setup>
import { computed, ref } from 'vue';
//声明一个空数组存放
let list = ref([])
//声明当前下标
const currentIndex = ref(0)
//生成1W个数
for (let i = 1; i < 10000; i++) {
    list.value.push({ id: i, value: Math.trunc(Math.random() * 100) })
}

//滚动显示的内容
const displayList = computed(() => {
   return list.value.slice(currentIndex.value, currentIndex.value+20)
})

//滚动可见的第一个数的下标
const onScroll = (e) => {
    currentIndex.value = Math.trunc(e.target.scrollTop / 40 )
    console.log(currentIndex.value);
}
</script>

<template>
    <div class="container" @scroll="onScroll">
        <div :style="{height:currentIndex * 40 +'px'}" ></div>
        <div class="content" style="height:40px" v-for="item in displayList" :key="item.id">第{{ item.id }}，{{ item.value }}</div>
    </div>
</template>

<style scoped>
.container {
    height: 400px;
    width: 400px;
    overflow-y: scroll;
}

</style>